<template>
  <el-main>
    <div style="float: left; width: 20%; height: 600">
      <el-scrollbar style="width: 95%; height: 600px" class="sampleScrollbar">
        <div class="material-search-tree">
          <el-tree
            ref="tree"
            :filter-node-method="filterNode"
            class="sampleTree"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-scrollbar>
    </div>
    <div style="float: right; width: 80%">
      <div class="material-content">
        <el-table ref="table" :data="list" style="width: 100%">
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column v-if="false" label="ID">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column v-if="false" label="ParentId">
            <template slot-scope="scope">
              {{ scope.row.parentId }}
            </template>
          </el-table-column>
          <el-table-column label="服务内容">
            <template slot-scope="scope">
              {{ scope.row.serviceName }}
            </template>
          </el-table-column>
          <el-table-column label="服务项目">
            <template slot-scope="scope">
              {{ scope.row.content }}
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                size="mini"
                :disabled="scope.row.priceStatus == 1"
                placeholder="请输入价格"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="实时计价">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.priceStatus"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="small"
                icon="el-icon-setting"
                plain
                @click="updatePriceFunction(scope.row)"
              >
                设置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <BasePagination
            :total="pagination.total"
            :page-index="pagination.pageIndex"
            :page-size="pagination.pageSize"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
          />
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import {
  getList,
  UpdatePrice,
  UpdatePriceStatus,
  GetSampleTree,
} from "../../../api/ThirdParty/EntrustService/EntrustService.js";

export default {
  name: "DetectionServiceList",
  data() {
    return {
      loading: true,
      list: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "content",
      },
      queryForm: {
        id: "",
      },
      sampleFilterForm: {},
      dialogFormVisible: false,
      formData: {
        id: 0,
        parentId: 0,
        serviceName: "",
        content: "",
        price: 0,
        priceStatus: 0,
        remark: "",
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    GetSampleTree(this.sampleFilterForm).then((res) => {
      this.treeData = res.data;
    });
    this.getList();
  },
  methods: {
    handleNodeClick(data) {
      this.queryForm.id = data.id;
      this.getList();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.$message({
        type: "success",
        message: "设置成功!",
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 操作失败回调用
    faildfulOperation() {
      this.$message({
        type: "info",
        message: "已取消",
      });
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    getList() {
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.list.forEach((item) => {
            item.price = item.price / 100;
          });
          this.pagination.total = res.data.total;
        })
        .catch(() => {});
      this.init();
    },
    // 通过switch控件改变状态
    changeSwitch(row) {
      const str =
        row.priceStatus === 1
          ? "启用实时计价，开启实时计价后，本行单价将不再使用"
          : "禁用实时计价";
      this.$confirm(str, "提示", {
        confirmButtonText: "我知道了",
        type: "warning",
      }).then((res) => {
        var _formData = this.formData;
        _formData.id = row.id;
        _formData.priceStatus = row.priceStatus === true ? "1" : "0";
        UpdatePriceStatus(_formData)
          .then((res) => {
            this.SuccessfulOperation();
            getList();
          })
          .catch((res) => {
            this.faildfulOperation();
          });
      });
    },
    updatePriceFunction(data) {
      var _formData = this.formData;
      _formData.id = data.id;
      _formData.price = data.price;
      if (_formData.price === "") {
        this.$message.warning("价格不能为空");
        return;
      }
      this.$confirm("此操作将设置服务金额, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: (action) => {
          if (action === "confirm") {
            UpdatePrice(_formData)
              .then((res) => {
                getList();
              })
              .catch((res) => {
                this.faildfulOperation();
              });
          }
        },
      });
    },
  },
};
</script>
